<template>
  <div>
    <h2>学生请假页面</h2>
    <el-row class="mb-4">
      <el-button type="primary" @click="showDialog">新增请假</el-button>
    </el-row>
    <el-dialog v-model="dialogVisible" title="新增请假" width="30%">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="请假理由" prop="reason">
          <el-input v-model="ruleForm.reason" />
        </el-form-item>
        <el-form-item label="开始时间" prop="start">
          <el-date-picker v-model="ruleForm.start" type="datetime" placeholder="请选择开始时间" />
        </el-form-item>
        <el-form-item label="结束时间" prop="end">
          <el-date-picker v-model="ruleForm.end" type="datetime" placeholder="请选择结束时间" />
        </el-form-item>
        <el-form-item label="附件" prop="extend">
          <el-upload
            ref="uploadRef"
            v-model:file-list="fileList"
            class="upload-demo"
            action="/api/uploads"
            name="filename"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :on-success="success"
            :auto-upload="false"
          >
            <el-button type="primary">点击上传请假附件</el-button>
            <template #tip>
              <div class="el-upload__tip">jpg/png files with a size less than 500KB.</div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <leave-list :list="leaveInfo.list" type="2"></leave-list>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { leaveAdd, leaveList } from '@/service/leaveService'
import LeaveList from '@/components/LeaveList.vue'

const dialogVisible = ref(false) //弹框控制状态
let leaveInfo: any = ref({
  list: []
})

let showDialog = () => {
  dialogVisible.value = true
}

const ruleFormRef = ref() //表单元素

const ruleForm = reactive({
  //表单内容
  reason: '', //理由
  start: '', //开始时间
  end: '', //结束时间
  extend: '' //附件
})
const rules = reactive({
  reason: [{ required: true, message: '请假理由不能为空', trigger: 'blur' }],
  start: [{ required: true, message: '开始时间不能为空', trigger: 'blur' }],
  end: [{ required: true, message: '结束时间不能为空', trigger: 'blur' }]
})
//数据声明

onMounted(async () => {
  let res = await leaveList({})
  if (res.data.code == 200) {
    leaveInfo.value.list = res.data.data
  } else {
    alert(res.data.msg)
  }
})

const submitForm = (formEl: any) => {
  if (!formEl) return
  formEl.validate(async (valid: any) => {
    if (valid) {
      if (ruleForm.end > ruleForm.start) {
        //alert('合法了')
        //取出数据 新增到数据库
        //判断有没有图片需要上传
        if (fileList.value.length) {
          //alert('需要图片上传')
          uploadRef.value!.submit()
        } else {
          //不需要
          let res = await leaveAdd({
            ...ruleForm
          })
          if (res.data.code == 200) {
            leaveInfo.value.list.push(...res.data.data)
            resetForm(ruleFormRef.value)
          } else {
            alert(res.data.msg)
          }
        }
      } else {
        alert('开始时间小于结束时间')
      }
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: any) => {
  //重置
  if (!formEl) return
  formEl.resetFields()
  dialogVisible.value = false
  fileList.value = []
  successList.value = []
}
const uploadRef = ref() //上传组件的名称
const fileList = ref<UploadUserFile[]>([]) //上传的图片列表
const successList = ref<any>([]) //上传成功的集合

const success = async (res: any) => {
  //成功的回调
  if (res.code == 200) {
    successList.value.push(res.url)
    if (fileList.value.length == successList.value.length) {
      let res = await leaveAdd({
        ...ruleForm,
        extend: successList.value.join(',')
      })
      if (res.data.code == 200) {
        leaveInfo.value.list.push(...res.data.data)
        resetForm(ruleFormRef.value)
      } else {
        alert(res.data.msg)
      }
    }
  }
}
const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  )
}
</script>

<style></style>
